<template>
  <div>
    <div v-for="(rule, index) in group.checkRules" class="form-check-rule-config-item">
      <div class="form-check-rule-config-item-header">
        <div class="form-check-rule-config-item-header">规则设置</div>
        <div class="form-check-rule-config-item-button-wrapper">
          <a-button @click="() => addNew(index)" icon="plus" type="primary" size="small" shape="circle"/>
          <a-button @click="() => remove(index)" icon="minus" type="danger" size="small" shape="circle"/>
        </div>
      </div>
      <div class="form-check-rule-config-item-body">
        <RowWrapper>
          <RowAttribute :span="24" :label-width="labelWidth" label="如果">
            <FormulaTextAreaConfig v-model="rule.ifFormula" :title="rule.ifFormulaTitle"
                                   :form-definition="formDefinition" @update:title="t => rule.ifFormulaTitle = t"
                                   :variableContainerConfig="variableContainerConfig"/>
          </RowAttribute>
          <RowAttribute :span="24" :label-width="labelWidth" label="则必须" :required="true">
            <FormulaTextAreaConfig v-model="rule.checkFormula" :title="rule.checkFormulaTitle"
                                   :form-definition="formDefinition" @update:title="t => rule.checkFormulaTitle = t"
                                   :variableContainerConfig="variableContainerConfig"/>
          </RowAttribute>
          <RowAttribute :span="12" :label-width="labelWidth" label="提示" :required="true">
            <a-textarea v-model="rule.message"/>
          </RowAttribute>
          <RowAttribute :span="12" :label-width="labelWidth" label="详细信息">
            <a-textarea v-model="rule.content"/>
          </RowAttribute>
          <RowAttribute :span="6" :label-width="labelWidth" label="明细域">
            <FormCheckSubFormSelector :form-definition="formDefinition" v-model="rule.subFormId"/>
          </RowAttribute>
          <RowAttribute :span="6" :label-width="labelWidth" label="排序">
            <a-input-number v-model="rule.sort" placeholder="请输入排序"/>
          </RowAttribute>
          <RowAttribute :span="6" :label-width="labelWidth" label="是否强制校验">
            <div style="padding: 5px">
              <a-checkbox :checked="rule.forceCheck" @click.native="() => rule.forceCheck = !rule.forceCheck"/>
            </div>
          </RowAttribute>
          <RowAttribute :span="6" :label-width="labelWidth" label="是否启用">
            <div style="padding: 5px">
              <a-checkbox :checked="rule.enable" @click.native="() => rule.enable = !rule.enable"/>
            </div>
          </RowAttribute>
        </RowWrapper>
      </div>
    </div>
  </div>
</template>
<script>
import {createProps} from '@/utils';
import {createCheckRule, createFormCheckGroup, createFormDefinition} from '@comp/hhd/design/FormDesigner/types';
import RowAttribute from '@comp/hhd/layout/RowAttribute.vue';
import RowWrapper from '@comp/hhd/layout/RowWrapper.vue';
import FormulaTextAreaConfig
  from '@comp/hhd/design/FormDesigner/field/comps/form/FieldValueFormulaGroups/configs/FormulaTextAreaConfig.vue';
import FormCheckSubFormSelector from '@comp/hhd/design/FormDesigner/form/check/FormCheckSubFormSelector.vue';

export default {
  name: 'FormCheckRuleConfig',
  components: {
    FormCheckSubFormSelector,
    FormulaTextAreaConfig,
    RowWrapper,
    RowAttribute
  },
  props: {
    formDefinition: createProps(Object, createFormDefinition),
    group: createProps(Object, createFormCheckGroup)
  },
  data() {
    return {
      labelWidth: '120px'
    };
  },
  methods: {
    addNew(index) {
      this.group.checkRules.splice(index + 1, 0, createCheckRule());
    },
    remove(index) {
      this.group.checkRules.splice(index, 1);
      if (!this.group.checkRules.length) {
        this.addNew(0);
      }
    },
  },
  computed: {
    variableContainerConfig() {
      let formIds = [(this.formDefinition.subForms || []).map(i => i.id), this.formDefinition.id].toString();
      return {
        containers: ['formVariable'],
        formDefinition: this.formDefinition,
        formIds
      };
    },
  }
};
</script>
<style>
.form-check-rule-config-item {
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 0 10px #d7d7d7;
  margin: 10px;
}

.form-check-rule-config-item-header {
  display: flex;
  flex: 1;
  padding: 0 10px;
  align-items: center;
  height: 40px;
  background: #f5f5f5;
}

.form-check-rule-config-item-body {
  padding: 10px 10px 5px 10px;
}

.form-check-rule-config-item-button-wrapper > * {
  margin-left: 10px;
}
</style>